<template>
  <view class="textContainer">
    <view class="textTitle spaceBetween">
      <view style="display: flex; align-items: center">
        <view class="titleFlag"></view><text>{{ title }}</text>
      </view>
      <view class="morePos" @click="onClickMoreSay()"
        ><span class="styleTextMoreJob">更多职说</span>
        <img class="styleImageMoreJob" :src="arrowRight" />
      </view>
    </view>
    <view class="sayBox" v-if="sayList.length > 0">
      <view
        class="sayBoxItem"
        v-for="item in sayList"
        :key="item.articleId"
        :style="{ backgroundImage: 'url(' + item.info + ')' }"
        @click="goToJobSay(item)"
      >
        <view class="bottom">
          <view class="content">{{ item.title }}</view>
          <view class="avatarName">
            <view class="left">
              <img :src="item.personPic" />
              <text>{{ item.ownName }}</text>
            </view>
            <view v-if="false" class="right">
              <img :src="jobSayViewSrc" />
              <text>{{ kFormatter(item.vCnt) }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else class="emptyLoading">
      <u-loading mode="circle" size="50" v-if="loading"></u-loading>
      <Empty
        v-else
        :baseImg="emptyImg"
        text="暂无数据"
        :fontWeight="400"
        textColor="#bfbfbf"
        class="empty"
        spacing="0"
      />
    </view>
  </view>
</template>
<script>
import { getLayerDetailsData } from '@/api/modules/career';
import Empty from '@/components/Empty.vue';
export default {
  props: {
    jobName: {
      type: String,
      default: ''
    },
    positionId: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    layerId: {
      type: String,
      default: null
    }
  },
  components: {
    Empty
  },
  data() {
    return {
      loading: false,
      emptyImg: this.$imgBaseSelf + 'common/empty.png',
      arrowRight:
        this.$imgBaseSelf + 'career/positionDictionary/job_detail_more_job.png',
      jobSayViewSrc:
        this.$imgBaseSelf +
        'career/positionDictionary/job_detail_say_view.webp',
      sayList: []
    };
  },
  mounted() {
    this.getLayerDetail();
  },
  methods: {
    kFormatter(num) {
      if (num >= 10000 && num < 1000000) {
        return (num / 1000).toFixed(1) + 'K';
      } else if (num >= 1000000) {
        return (num / 1000000).toFixed(1) + 'M';
      }
      return num;
    },
    getLayerDetail() {
      if (!this.layerId) return;
      this.loading = true;
      console.log('getJobSay', this.positionId);
      const params = {
        id: this.positionId,
        layerIds: this.layerId
      };
      getLayerDetailsData(params)
        .then((res) => {
          if (res.code == 200) {
            this.sayList = res.data[0].children[0].children[0].data;
            this.moreLayerId = res.data[0].children[0].children[0].layerId || 0;
            this.moreLayerType = res.data[0].title == '职讯' ? 30 : 40;
          } else {
            console.log('请求失败');
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    goToJobSay(item = '') {
      console.log('goToJobSay', item);
      // 小程序播放
      uni.navigateTo({
        url:
          '/pagesSub/career/video/playSimple?articleId=' +
          item.articleId +
          '&relatedType=2' +
          '&positionId=' +
          this.positionId
      });
      return;
      // 网页播放
      // uni.navigateTo({
      //   // url: `/pagesSub/careerNew/positionDictionary/JobDetailWebview?sharePersonId=24384836&articleId=2241679303390688&shcd=ocgkkngnkoc`,
      //   url: `/pagesSub/careerNew/positionDictionary/JobDetailWebview?sharePersonId=${
      //     item.ownId
      //   }&articleId=${item.articleId}&videoSrc=${encodeURIComponent(
      //     item.src
      //   )}&title=${item.content}`,
      // });
    },
    onClickMoreSay() {
      console.log(
        '--------->onClickMoreSay',
        this.title,
        this.positionId,
        this.jobName
      );
      uni.navigateTo({
        url:
          '/pagesSub/career/moreJobVideo/index?positionId=' +
          this.positionId +
          '&name=' +
          this.jobName +
          '&moreLayerId=' +
          this.moreLayerId +
          '&moreLayerType=' +
          this.moreLayerType
      });
    }
  }
};
</script>
<style scoped lang="scss">
.textContainer {
  margin: 24rpx 32rpx 0rpx 32rpx;
  padding-top: 32rpx;
  padding-bottom: 16rpx;
  padding-left: 32rpx;
  padding-right: 32rpx;
  background: #ffffff;
  border-radius: 24rpx;

  .spaceBetween {
    justify-content: space-between;
  }
  .textTitle {
    display: flex;
    align-items: center;
    font-size: 32rpx;
    font-family: PingFang-SC-Heavy, PingFang-SC;
    font-weight: 800;
    color: #222222;
    line-height: 44rpx;

    .titleFlag {
      width: 8rpx;
      height: 36rpx;
      border-radius: 64rpx;
      background-color: #f75a3e;
      margin-right: 16rpx;
    }
    .morePos {
      display: flex;
      flex-direction: row;
      align-items: center;

      .styleTextMoreJob {
        color: #999999;
        font-size: 24rpx;
        font-weight: 300;
      }

      .styleImageMoreJob {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }
  .sayBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 40rpx;
    .sayBoxItem {
      width: calc(50% - 4rpx); /* 盒子宽度一半再减去间隔值 */
      height: 410rpx; /* 宽高比为1.3:1 */
      margin-bottom: 28rpx; /* 底部间隔值 */
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      position: relative;
      border-radius: 8rpx;
      .bottom {
        position: absolute;
        display: flex;
        flex-direction: column;
        bottom: 0;
        width: 100%;
        height: 178rpx;
        border-radius: 8rpx;
        background: linear-gradient(
          180deg,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0.45) 100%
        );
        .content {
          margin-top: 46rpx;
          font-size: 26rpx;
          line-height: 36rpx;
          color: #fff;
          font-weight: bold;
          width: 100%;
          padding: 0 20rpx;
          overflow: hidden; //超出文本隐藏
          text-overflow: ellipsis; ///超出部分省略号显示
          display: -webkit-box; //弹性盒模型
          -webkit-box-orient: vertical; //上下垂直
          -webkit-line-clamp: 2; //自定义行数
        }
        .avatarName {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-weight: 400;
          color: #ffffff;
          width: 100%;
          flex: 1;
          padding: 0 20rpx;
          .left {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
            text {
              max-width: 120rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            img {
              width: 36rpx;
              height: 36rpx;
              border-radius: 50%;
              margin-right: 12rpx;
            }
          }
          .right {
            display: flex;
            align-items: center;
            font-size: 20rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;

            img {
              width: 26rpx;
              height: 26rpx;
              border-radius: 50%;
              margin-right: 6rpx;
            }
          }
        }
      }
    }
    .sayBoxItem:nth-child(2n + 1) {
      margin-right: 4rpx; /* 左侧元素右侧间隔值 */
    }
    .sayBoxItem:nth-child(2n) {
      margin-left: 4rpx; /* 右侧元素左侧间隔值 */
    }
  }
}
.emptyLoading {
  height: 450rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
